<template>
	<div class="p-grid p-fluid">
		<div class="p-col-12 p-md-6">
			<div class="card">
				<h5>输入框</h5>
				<div class="p-grid p-formgrid">
					<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
						<InputText type="text" placeholder="默认"></InputText>
					</div>
					<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
						<InputText type="text" placeholder="禁用" :disabled="true"></InputText>
					</div>
					<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
						<InputText type="text" placeholder="无效" class="p-error" />
					</div>
				</div>

				<h5>带图标 Icons</h5>
				<div class="p-grid p-formgrid">
					<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
						<span class="p-input-icon-left">
							<i class="pi pi-user" />
							<InputText type="text" placeholder="用户名" />
						</span>
					</div>
					<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
						<span class="p-input-icon-right">
							<InputText type="text" placeholder="检索" />
							<i class="pi pi-search" />
						</span>
					</div>
					<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
						<span class="p-input-icon-left p-input-icon-right">
							<i class="pi pi-user" />
							<InputText type="text" placeholder="检索" />
							<i class="pi pi-search" />
						</span>
					</div>
				</div>

				<h5>浮动标签</h5>
				<span class="p-float-label">
					<InputText id="username" type="text" v-model="floatValue"/>
					<label for="username">用户名</label>
				</span>

				<h5>Textarea</h5>
				<Textarea placeholder="请输入" :autoResize="true" rows="3" cols="30" />

				<h5>自动完成</h5>
				<AutoComplete placeholder="检索" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name"/>

				<h5>日期选择</h5>
				<Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>

				<h5>计数器</h5>
				<InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>

				<h5>标签输入框</h5>
				<Chips v-model="chipsValue"/>
			</div>

			<div class="card">
				<h5>滑块</h5>
				<InputText v-model.number="sliderValue" />
				<Slider v-model="sliderValue" />

				<h5>评分</h5>
				<Rating v-model="ratingValue"/>

				<h5>颜色选择器</h5>
				<ColorPicker style="width: 2rem" v-model="colorValue" />
			</div>
		</div>

		<div class="p-col-12 p-md-6">
			<div class="card">
				<h5>单选</h5>
				<div class="p-grid">
					<div class="p-col-12 p-md-4">
						<div class="p-field-radiobutton">
							<RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
							<label for="option1">芝加哥</label>
						</div>
					</div>
					<div class="p-col-12 p-md-4">
						<div class="p-field-radiobutton">
							<RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
							<label for="option2">洛杉矶</label>
						</div>
					</div>
					<div class="p-col-12 p-md-4">
						<div class="p-field-radiobutton">
							<RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
							<label for="option3">纽约</label>
						</div>
					</div>
				</div>

				<h5 style="margin-top: 0">多选</h5>
				<div class="p-grid">
					<div class="p-col-12 p-md-4">
						<div class="p-field-checkbox">
							<Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
							<label for="checkOption1">芝加哥</label>
						</div>
					</div>
					<div class="p-col-12 p-md-4">
						<div class="p-field-checkbox">
							<Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" />
							<label for="checkOption2">洛杉矶</label>
						</div>
					</div>
					<div class="p-col-12 p-md-4">
						<div class="p-field-checkbox">
							<Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" />
							<label for="checkOption3">纽约</label>
						</div>
					</div>
				</div>

				<h5 style="margin-top: 0">开关</h5>
				<InputSwitch v-model="switchValue" />
			</div>

			<div class="card">
				<h5>列表框</h5>
				<Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true"/>

				<h5>下拉菜单</h5>
				<Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="选择" />

				<h5>多选下拉菜单</h5>
				<MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="选择国家" :filter="true" class="multiselect-custom">
					<template #value="slotProps">
						<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
							<span :class="'flag flag-' + option.code.toLowerCase()" />
							<div>{{option.name}}</div>
						</div>
						<template v-if="!slotProps.value || slotProps.value.length === 0">
							选择国家
						</template>
					</template>
					<template #option="slotProps">
						<div class="country-item">
							<span :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
							<div>{{slotProps.option.name}}</div>
						</div>
					</template>
				</MultiSelect>
			</div>

			<div class="card">
				<h5>切换按钮</h5>
				<ToggleButton v-model="toggleValue" onLabel="是" offLabel="否"/>

				<h5>按钮选择组-单选</h5>
				<SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />

				<h5>按钮选择组 - 多选</h5>
				<SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true"/>
			</div>
		</div>

		<div class="p-col-12">
			<div class="card">
				<h5>输入组</h5>
				<div class="p-grid p-fluid">
					<div class="p-col-12 p-md-6">
						<div class="p-inputgroup">
							<span class="p-inputgroup-addon">
								<i class="pi pi-user"></i>
							</span>
							<InputText placeholder="用户名"/>
						</div>
					</div>

					<div class="p-col-12 p-md-6">
						<div class="p-inputgroup">
							<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart"></i></span>
							<span class="p-inputgroup-addon"><i class="pi pi-globe"></i></span>
							<InputText placeholder="价格"/>
							<span class="p-inputgroup-addon">$</span>
							<span class="p-inputgroup-addon">.00</span>
						</div>
					</div>

					<div class="p-col-12 p-md-6">
						<div class="p-inputgroup">
							<Button label="检索"/>
							<InputText placeholder="关键词"/>
						</div>
					</div>

					<div class="p-col-12 p-md-6">
						<div class="p-inputgroup">
							<span class="p-inputgroup-addon p-inputgroup-addon-checkbox">
								<Checkbox v-model="inputGroupValue" :binary="true"/>
							</span>
							<InputText placeholder="确定"/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import CountryService from '../api/CountryService';
	export default {
		data() {
			return {
				floatValue: null,
				autoValue: null,
				selectedAutoValue: null,
				autoFilteredValue: [],
				calendarValue: null,
				inputNumberValue: null,
				chipsValue: null,
				sliderValue: null,
				ratingValue: null,
				colorValue: '1976D2',
				radioValue: null,
				checkboxValue: [],
				switchValue: false,
				listboxValues: [
					{name: '纽约', code: 'NY'},
					{name: '罗马', code: 'RM'},
					{name: '伦敦', code: 'LDN'},
					{name: '伊斯坦布尔', code: 'IST'},
					{name: '巴黎', code: 'PRS'}
				],
				listboxValue: null,
				dropdownValues: [
					{name: '纽约', code: 'NY'},
					{name: '罗马', code: 'RM'},
					{name: '伦敦', code: 'LDN'},
					{name: '伊斯坦布尔', code: 'IST'},
					{name: '巴黎', code: 'PRS'}
				],
				dropdownValue: null,
				multiselectValue: null,
				multiselectValues: [
					{name: '澳大利亚', code: 'AU'},
					{name: '巴西', code: 'BR'},
					{name: '中国', code: 'CN'},
					{name: '埃及', code: 'EG'},
					{name: '法国', code: 'FR'},
					{name: '德国', code: 'DE'},
					{name: '印度', code: 'IN'},
					{name: '日本', code: 'JP'},
					{name: '西班牙', code: 'ES'},
					{name: '美国', code: 'US'}
				],
				toggleValue: false,
				selectButtonValues1: [
					{name: '选项 1', code: 'O1'},
					{name: '选项 2', code: 'O2'},
					{name: '选项 3', code: 'O3'},
				],
				selectButtonValue1: null,
				selectButtonValues2: [
					{name: '选项 1', code: 'O1'},
					{name: '选项 2', code: 'O2'},
					{name: '选项 3', code: 'O3'},
				],
				selectButtonValue2: null,
				inputGroupValue: false
			}
		},
		countryService: null,
		created() {
			this.countryService = new CountryService();
		},
		mounted() {
			this.countryService.getCountries().then(data => this.autoValue = data);
		},
		methods: {
			searchCountry(event) {
				setTimeout(() => {
					if (!event.query.trim().length) {
						this.autoFilteredValue = [...this.autoValue];
					}
					else {
						this.autoFilteredValue = this.autoValue.filter((country) => {
							return country.name.toLowerCase().startsWith(event.query.toLowerCase());
						});
					}
				}, 250);
			}
		}
	}
</script>

<style scoped lang="scss">
	.p-multiselect {
		min-width: 15rem;
	}

	.multiselect-custom {

		.p-multiselect-label:not(.p-placeholder) {
			padding-top: .25rem;
			padding-bottom: .25rem;
		}

		.country-item {
			display: flex;
			align-items: center;

			span.flag {
				width: 18px;
				height: 12px;
				margin-right: .5rem;
				margin-left: .5rem;
			}
		}

		.country-item-value {
			border-radius: 3px;
			display: inline-flex;
			margin-right: .5rem;
			background-color: var(--primary-color);
			color: var(--primary-color-text);
		}
	}
</style>
